<template>
  <Panel toggleable>
    <template #header>
      <div class="flex items-center gap-2">
        <span class="font-bold">Http根配置</span>
      </div>
    </template>
    <Chip v-for="(i, index) in httpBasicConfigs" :key="index">
      {{ i.code + '  ' + i.value + ';'
      }}<i class="pi pi-minus-circle" @click="httpBasicConfigRemoveFn(i)" />
    </Chip>
    <Divider />
    <div class="flex gap-2">
      <basic-config-add
        :options="httpBasicConfigOptions"
        @confirm="httpBasicConfigAddFn"
      ></basic-config-add>
      <Button icon="pi pi-check" size="small" style="width: 120px" @click="addServerFn"
        >+ Server</Button
      >
      <Button icon="pi pi-check" size="small" style="width: 120px" @click="addStreamFn"
        >+ Stream</Button
      >
    </div>
  </Panel>
  <Divider />
  <Panel toggleable>
    <template #header>
      <SelectButton
        :allow-empty="false"
        optionLabel="name"
        v-model="serverOrStream"
        option-value="value"
        :options="serverStreamOptions"
        size="small"
      />
    </template>
    <http-server-component
      v-show="serverOrStream === '1'"
      ref="httpServerRef"
    ></http-server-component>
    <http-stream-component
      v-show="serverOrStream === '2'"
      ref="httpStreamRef"
    ></http-stream-component>
  </Panel>
</template>
<script setup lang="ts">
import BasicConfigAdd from '@/views/tools/nginx/detail-comps/basic-config-add.vue'
import { ref, useTemplateRef } from 'vue'
import type { BasicConfig, HttpConfigDto } from '@/types/dt/Dt.ts'
import HttpServerComponent from '@/views/tools/nginx/detail-comps/http-server-component.vue'
import HttpStreamComponent from '@/views/tools/nginx/detail-comps/http-stream-component.vue'
import { httpBasicOptions } from '@/views/tools/nginx/data/http_basic_options.ts'
import type { BasicConfigOption } from '@/views/tools/nginx/nginx-info.ts'

const httpServerRef = useTemplateRef('httpServerRef')
const httpStreamRef = useTemplateRef('httpStreamRef')

// http 配置项
const httpBasicConfigOptions = ref<BasicConfigOption[]>(httpBasicOptions)
const httpBasicConfigs = ref<BasicConfig[]>([])
function httpBasicConfigAddFn(e: BasicConfig) {
  httpBasicConfigs.value.push(e)
}
function httpBasicConfigRemoveFn(e: BasicConfig) {
  httpBasicConfigs.value = httpBasicConfigs.value.filter((item) => item !== e)
}

const serverOrStream = ref('1')
const serverStreamOptions = [
  { name: 'Server', value: '1' },
  { name: 'UpStream', value: '2' },
]

function addServerFn() {
  httpServerRef.value?.addServer()
}
function addStreamFn() {
  httpStreamRef.value?.addStream()
}

function getConfig(): HttpConfigDto {
  return {
    basicConfigs: httpBasicConfigs.value,
    serverConfig: httpServerRef.value!.getConfig(),
    upstreamConfig: httpStreamRef.value!.getConfig()
  }
}
function setConfig(config: HttpConfigDto) {
  httpBasicConfigs.value = config.basicConfigs || []
  httpServerRef.value?.setConfig(config.serverConfig || [])
  httpStreamRef.value?.setConfig(config.upstreamConfig || [])
}

defineExpose({
  getConfig, setConfig
})

</script>

<style scoped></style>
